<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sq="http://www.w3.org/1999/html">
<head>
  <th:block th:include="include :: header" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
  <div class="ibox float-e-margins">
    <div class="ibox-content">
      <form id="searchForm" name="searchForm" role="form" class="sq-searchForm">
        <div class="row">
          <div class="col-sm-3">
            <div class="form-group">
              <input type="text" placeholder="请输入名称" name="roleName" class="form-control required">
            </div>
          </div>
          <div class="col-sm-3">
            <div class="form-group">
              <sq:select id="status" name="status" dicCode="1001" pleaseChoose="角色状态"></sq:select>
            </div>
          </div>
          <div class="col-sm-6" align="right">
            <button onclick="search()" class="btn btn-primary" type="button">
              <i class="fa fa-search"></i>&nbsp;搜索
            </button>
            <button onclick="reset()" class="btn btn-primary btn-outline" type="button">
              <i class="fa fa-recycle"></i>&nbsp;重置
            </button>
          </div>
        </div>
      </form>
    </div>

    <div class="ibox-content">
      <div class="row row-lg">
        <div class="col-sm-12">
          <div class="example-wrap">
            <div id="toolbar" class="form-group sq-toolbar">
              <button onclick="add()" class="btn btn-primary" type="button">新增</button>
              <button onclick="edit()" class="btn btn-warning" type="button">编辑</button>
              <button onclick="del()" class="btn btn-danger" type="button">删除</button>
              <button onclick="auth()" class="btn btn-default" type="button">分配菜单</button>
            </div>
            <div class="example">
              <table id="dataTable"></table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal inmodal" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content animated fadeIn">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                class="sr-only">Close</span></button>
        <h4 class="modal-title">菜单</h4>
      </div>
      <div class="modal-body">
        <div class="ibox-content">
          <ul id="tree" class="ztree" style="width:560px; overflow:auto;"></ul>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="saveData()">提交</button>
        <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
</body>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    const requestPath = parent.api.sys.role
    $(function () {
        let columns = [
            {
                field: "select",
                checkbox: true //给多选框赋一个field值为“select”用于更改选择状态
            }, {
                title: "角色名称",//标题
                field: "roleName",//键名
            }, {
                title: "备注",
                field: "remark"
            }, {
                title: "创建时间",
                field: "createTime"
            }, {
                title: "状态",
                field: "status",
                formatter: function (value, row, index) {
                    return parent.formartDic(value, '1001')
                }
            }
        ]
        initTable(columns)
    })

    //授权
    function auth() {
        if (validCheckOne()) {
            $("#rid").val(getSelectedId());
            $('#modal').modal("show");
            //初始化树
            initTree();
        }
    }

    //初始化树结构
    function initTree() {
        var setting = {
            check: {
                enable: true
            },
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: ""
                }
            }
        };

        $.ajax({
            type: "get",
            url: parent.api.sys.menu.query,
            dataType: "json",
            data: "roleId=" + getSelectedId(),
            success: function (data) {
                $.fn.zTree.init($("#tree"), setting, data.info);
            }
        });
    }

    //分配角色提交方法
    function saveData() {
        let treeObj = $.fn.zTree.getZTreeObj("tree")
        let nodes = treeObj.getCheckedNodes(true)
        let res = nodes.map(function(item) {return item.id}).join(',')

        $.ajax({
            type: "post",
            url: requestPath.relateMenu,
            data: {res: res, roleId: getSelectedId()},
            dataType: "json",
            success: function (data) {
                swal(data.message)
                if (data.success == true) {
                    setTimeout(function () {
                        window.location.href = requestPath.index;
                    }, 1000)
                }
            }
        })
    }
    function delById(url, id) {
        url = url || requestPath.del
        id = id || $("#id").val()
        swal({
                title: "您确定要删除吗?",
                text: "删除后将无法恢复,请谨慎操作!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false
            }, function () {
                $.ajax({
                    type: "get",
                    url: requestPath.validDel,
                    data: "id=" + id,
                    dataType: "json",
                    success: function (data) {
                        let success = data.success,
                            message = data.message
                        if (success) {
                            deleteRole(id)
                        } else {
                            swal({
                                title: message,
                                type: "warning",
                                showCancelButton: true,
                                confirmButtonColor: "#DD6B55",
                                confirmButtonText: "删除",
                                closeOnConfirm: false
                            },function (){
                                deleteRole(id)
                            })
                        }
                    }
                })
            }
        )
    }

    function deleteRole(id) {
        $.ajax({
            type: "get",
            url: requestPath.del,
            data: "id=" + id,
            dataType: "json",
            success: function (data) {
                let success = data.success,
                    message = data.message
                swal(message)
                if (success) {
                    setTimeout(function() {location.href = requestPath.index}, 1000);
                }
            }
        })
    }
</script>
</html>
